<template>
    <div class="searchList">
      <!-- Nav板块 -->
      <van-nav-bar title="商品列表" left-arrow border @click-left="$router.go(-1)"/>
      <van-search  v-model="value" @input="goSearch" show-action  shape="round" placeholder="请输入搜索关键词">
  <template #action>
    <div class="icon">
      <van-icon  name="apps-o" size="30"/>
    </div>
  </template>
</van-search>
  <ul>
    <li>综合</li>
    <li>销量</li>
    <li>价格</li>
  </ul>
  <div class="list">
    <GoodsItem v-for="item in list" :key="item.goods_id" :goodsList="item"></GoodsItem>
  </div>
    </div>
  </template>

<script>
import GoodsItem from '@/components/GoodsItem..vue'
import { GoodsItemList } from '@/api/search'
export default {
  name: 'SearchListIndex',
  async created () {
    this.value = this.$route.query.search
    const list = await GoodsItemList(this.value)
    // console.log(list.data.list.data)
    this.list = list.data.list.data
  },
  data () {
    return {
      value: '',
      list: []// 搜索商品列表
    }
  },
  methods: {
    async goSearch () {
      // this.$router.go(-1)
      const list = await GoodsItemList(this.value)
      this.list = list.data.list.data
    }
  },
  components: {
    GoodsItem
  }
}
</script>

<style lang="less" scoped>
  .list{
    margin-top: 20px;
    text-align: center;
  }
.icon{
  margin-top:10px ;
  }
  ul{
    font-size: 16px;
    li{
      float: left;
      width: 30%;
      margin: 0 10px 0 0;
      text-align: center;
    }

  }

</style>
